<template>
  <div class="page-container">
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" :inline="true" label-position="left" @submit.prevent>
          <el-form-item :label="$t('user.username')" prop="userName">
            <el-input v-model="queryParams.userName" :placeholder="$t('user.usernameTip')" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('user.mobile')" prop="mobile">
            <el-input v-model="queryParams.mobile" :placeholder="$t('user.mobileTip')" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('status')" prop="status">
            <el-select v-model="queryParams.status" :placeholder="$t('select')" clearable
              @keyup.enter.native="handleQuery" style="width: 140px;">
              <el-option :label="$t('enabled')" value="1" />
              <el-option :label="$t('disabled')" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('createTime')" prop="createTime">
            <el-date-picker v-model="queryParams.createTime" type="daterange" clearable
              @keyup.enter.native="handleQuery" style="width: 240px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t('query') }}</el-button>
            <el-button @click="reset">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div class="tool-controls">
      <el-button type="primary" plain :icon="Plus" @click="handleAdd">{{ $t('add') }}</el-button>
    </div>

    <el-table v-loading="loading" :data="lists" :border="true">
      <el-table-column :label="$t('user.userNo')" align="center" prop="userId" width="140" />
      <el-table-column :label="$t('user.username')" align="center" prop="userName" />
      <el-table-column :label="$t('user.nickName')" align="center" prop="nickName" />
      <el-table-column :label="$t('user.mobile')" align="center" prop="mobile" width="200" />
      <el-table-column :label="$t('status')" align="center" prop="status" width="100">
        <template #default="scope">
          <el-text v-if="scope.row.status == '1'" type="success">{{ $t('enabled') }}</el-text>
          <el-text v-else type="danger">{{ $t('disabled') }}</el-text>
        </template>
      </el-table-column>
      <el-table-column :label="$t('createTime')" align="center" prop="createTime" width="180" />
      <el-table-column :label="$t('handle')" align="center" class-name="small-padding fixed-width" width="160">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">{{ $t('edit') }}</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-show="lists.length > 0" v-model:current-page="currentPage" v-model:page-size="pageSize"
      :total="lists.length" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>

  <!--新增修改-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="460px">
    <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="auto">
      <el-form-item :label="$t('user.username')" prop="userName">
        <el-input v-model="userInfo.userName" :placeholder="$t('user.usernameTip')" />
      </el-form-item>
      <el-form-item :label="$t('user.nickName')" prop="nickName">
        <el-input v-model="userInfo.nickName" :placeholder="$t('user.nickNameTip')" />
      </el-form-item>
      <el-form-item :label="$t('user.mobile')" prop="mobile">
        <el-input v-model="userInfo.mobile" :placeholder="$t('user.mobileTip')" />
      </el-form-item>
      <el-form-item :label="$t('user.status')" prop="status">
        <el-radio-group v-model="userInfo.status">
          <el-radio label="1">{{ $t('user.enabled') }}</el-radio>
          <el-radio label="0">{{ $t('user.disabled') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
      <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from '#imports';
import { useI18n } from '#imports';
import type { FormRules } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import dayjs from 'dayjs';

const { t } = useI18n();

definePageMeta({
  title: '用户管理',
  zh_hk_title: '用戶管理',
  en_title: 'User Management',
  ssr: true, // 必须为 true
  isTokenCheck: true,
})

interface QueryParams {
  userName: string;
  mobile: string;
  status: string;
  createTime: Array<string>;
}

interface UserModel {
  userId: string;
  nickName: string;
  userName: string;
  mobile: string;
  status: string;
  createTime: string;
}

const queryParams: Ref<QueryParams> = ref({
  userName: '',
  mobile: '',
  status: '',
  createTime: [],
})

const handleQuery = () => { }

const reset = () => {
  queryParams.value = {
    userName: '',
    mobile: '',
    status: '',
    createTime: [],
  }
}

const dialogVisible = ref(false);
const userInfo: Ref<UserModel> = ref({
  userId: '',
  userName: '',
  nickName: '',
  mobile: '',
  status: '',
  createTime: '',
});
const rules = reactive<FormRules>({
  userName: [{ required: true, message: t('user.usernameTip'), trigger: 'blur' }],
  mobile: [{ required: true, message: t('user.mobileTip'), trigger: 'blur' }],
  status: [{ required: true, message: t('select'), trigger: 'change' }],
})
const dialogTitle = ref('');
const operateType = ref('');
const handleAdd = () => {
  dialogVisible.value = true;
  operateType.value = 'add';
  dialogTitle.value = t('add');
  userInfo.value = {
    userId: Date.now().toString(),
    userName: '',
    nickName: '',
    mobile: '',
    status: '',
    createTime: '',
  }
}

const handleEdit = (row: UserModel) => {
  dialogVisible.value = true;
  operateType.value = 'edit';
  dialogTitle.value = t('edit');
  userInfo.value = row;
}

const submitForm = () => {
  if (operateType.value === 'add') {
    lists.value.push({
      ...userInfo.value,
      createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    });
  } else if (operateType.value === 'edit') {
    const userId = userInfo.value.userId;
    lists.value = lists.value.map((item: any) => {
      if (item.userId === userId) {
        return userInfo.value;
      }
      return item;
    });
  }
  dialogVisible.value = false;
}

const handleDelete = (row: UserModel) => {
  const userId = row.userId;
  lists.value = lists.value.filter((item: any) => item.userId !== userId);
}

const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const lists: any = ref([
  {
    userId: 1,
    userName: 'admin',
    nickName: '管理员',
    mobile: '13800138000',
    status: '1',
    createTime: '2021-01-01 12:00:00',
  },
  {
    userId: 2,
    userName: 'user1',
    nickName: '用户1',
    mobile: '13800138001',
    status: '0',
    createTime: '2021-01-02 12:00:00',
  },
  {
    userId: 3,
    userName: 'user2',
    nickName: '用户2',
    mobile: '13800138002',
    status: '1',
    createTime: '2021-01-03 12:00:00',
  },
  {
    userId: 4,
    userName: 'user3',
    nickName: '用户3',
    mobile: '13800138003',
    status: '0',
    createTime: '2021-01-04 12:00:00',
  },
  {
    userId: 5,
    userName: 'user4',
    nickName: '用户4',
    mobile: '13800138004',
    status: '1',
    createTime: '2021-01-05 12:00:00',
  },
  {
    userId: 6,
    userName: 'user5',
    nickName: '用户5',
    mobile: '13800138005',
    status: '0',
    createTime: '2021-01-06 12:00:00',
  },
  {
    userId: 7,
    userName: 'user6',
    nickName: '用户6',
    mobile: '13800138006',
    status: '1',
    createTime: '2021-01-07 12:00:00',
  },
  {
    userId: 8,
    userName: 'user7',
    nickName: '用户7',
    mobile: '13800138007',
    status: '0',
    createTime: '2021-01-08 12:00:00',
  },
  {
    userId: 9,
    userName: 'user8',
    nickName: '用户8',
    mobile: '13800138008',
    status: '1',
    createTime: '2021-01-09 12:00:00',
  },
  {
    userId: 10,
    userName: 'user9',
    nickName: '用户9',
    mobile: '13800138009',
    status: '0',
    createTime: '2021-01-10 12:00:00',
  },
]);

const handleSizeChange = (val: number) => { }
const handleCurrentChange = (val: number) => { }
</script>